<template>
    <div class="login-div">
        <div class="form-div">
            <h3>xxx管理系统</h3>
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="用户名" name="userName" :rules="[{ required: true, message: '用户名不能为空' }]">
                    <a-input v-model:value="formState.userName" />
                </a-form-item>
                <a-form-item label="密码" name="password" :rules="[{ required: true, message: '密码不能为空' }]">
                    <a-input-password v-model:value="formState.password" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
                    <a-button type="primary" @click="onSubmit">登录</a-button>
                    <a-button style="margin-left: 10px" @click="register">注册</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const formState = reactive({
    userName: 'admin',
    password: '123456',
});
const onSubmit = () => {
    console.log(formState);
    router.replace("/home");
};
const labelCol = {
    style: {
        width: '150px',
    },
};
const wrapperCol = {
    span: 14,
};

const register = () => {
    router.push("/register");
}
</script>

<style scoped>

</style>